<template>
<div>
        <div style="margin-bottom: 40px;">
            <div class="componentClassTitle">基础样式1</div>
            <u-tabs appear="square">
                <u-tab title="选项一"></u-tab>
                <u-tab title="选项二"></u-tab>
                <u-tab title="选项三"></u-tab>
                <u-tab title="选项四" disabled></u-tab>
            </u-tabs>
        </div>
        <div style="margin-bottom: 40px;">
            <div class="componentClassTitle">基础样式2</div>
            <u-tabs appear="round" style="margin-bottom: 40px;">
                <u-tab title="选项一"></u-tab>
                <u-tab title="选项二"></u-tab>
                <u-tab title="选项三"></u-tab>
                <u-tab title="选项四" disabled></u-tab>
            </u-tabs>
        </div>
        <div style="margin-bottom: 40px;">
            <div class="componentClassTitle">基础样式3</div>
            <u-tabs appear="line" style="margin-bottom: 40px;">
                <u-tab title="选项一"></u-tab>
                <u-tab title="选项二"></u-tab>
                <u-tab title="选项三"></u-tab>
                <u-tab title="选项四" disabled></u-tab>
            </u-tabs>
        </div>
        <div style="margin-bottom: 40px;">
            <div class="componentClassTitle">基础样式4</div>
            <u-tabs appear="capsule" style="margin-bottom: 40px;">
                <u-tab title="选项一"></u-tab>
                <u-tab title="选项二"></u-tab>
                <u-tab title="选项三"></u-tab>
                <u-tab title="选项四" disabled></u-tab>
            </u-tabs>
        </div>
        <div style="margin-bottom: 40px;">
            <div class="componentClassTitle">基础样式5</div>
            <u-tabs appear="text">
                <u-tab title="选项一"></u-tab>
                <u-tab title="选项二"></u-tab>
                <u-tab title="选项三"></u-tab>
                <u-tab title="选项四" disabled></u-tab>
            </u-tabs>
        </div>
    </div>
</template>
